<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'

const id = ref(0)
const msgs = ref([])
const kbcss = reactive({
  'margin-bottom': ' 250rpx',
  'bottom': '0px'
})
const show = function(message, dur = 1500) {
  msgs.value.push({
    text: message,
    id: id.value
  })
  id.value++
  setTimeout(() => {
    if (!msgs.value.length) {
      return
    }
    msgs.value.pop()
  }, dur)
  console.log("on show css",kbcss)
}

const keyboardEvent = function({ height }) {
  kbcss['bottom'] = `${height + 30}rpx`
}

onLoad(() => {
  // kbcss['--kb-h'] = `272rpx`
  // #ifdef APP
  uni.onKeyboardHeightChange(keyboardEvent)
  // #endif
  console.log('show message load')

})

onUnload(() => {
  console.log('message unloaded')
  // #ifdef APP
  uni.offKeyboardHeightChange(keyboardEvent)
  // #endif
})

defineExpose({
  show
})
</script>

<template>
  <div class="common-toast">
    <div class="toast-warp" :style="{...kbcss}">
      <div class="toast-info" v-for="item in msgs" :key="item.id">
        <span class="message">{{ item.text }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.common-toast {

  .toast-warp {
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translate(-50%, 0);

    .toast-info {
      min-width: 150rpx;
      border: #E5E5E5;
      background-color: #eee;
      border-radius: 25rpx;
      padding: 20rpx;
      text-align: center;

      .message {
        color: black;
        font-size: 14px;

      }
    }
  }
}
</style>
